<template>
  <div>
    <Card :dis-hover='true' :shadow='true'>
      <OperationsTable
        :columns='columns'
        :tableData='tableData'
        @on-change='handleTableChange'
      />
    </Card>
  </div>
</template>

<script>
import OperationsTable from './operations.vue'

export default {
  name: 'resource_management',
  components: {
    OperationsTable
  },
  data() {
    return {
      option: {},
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          hidden: true
        },
        {
          title: '资源名称',
          key: 'name',
          search: {
            type: 'input'
          },
          align: 'center'
        },
        {
          title: '资源路径',
          key: 'path',
          search: {
            type: 'input'
          },
          align: 'center'
        },
        {
          title: '请求类型',
          key: 'method',
          search: {
            type: 'input'
          },
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.method ? params.row.method.toUpperCase() : '')
          }
        },
        {
          title: '资源类型',
          key: 'type',
          search: {
            type: 'radio',
            options: [
              {
                key: '全部',
                value: ''
              },
              {
                key: '接口',
                value: 1
              },
              {
                key: '按钮',
                value: 2
              }
            ]
          },
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.type === 1 ? '接口' : '按钮')
          }
        },
        {
          title: '资源描述',
          key: 'remark',
          hidden: true,
          align: 'center'
        },
        {
          title: '设置',
          key: 'settings',
          slot: 'action',
          hidden: true,
          fixed: 'right',
          width: 100,
          align: 'center'
        }
      ],
      tableData: []
    }
  },
  methods: {
    handleTableChange(table) {
      this.tableData = table
    }
  }
}
</script>

<style>

</style>
